<nz-spin [nzSize]="'large'" [nzSpinning]="loadingData">
  <div class="content-warp">
    <div class="content-header">
      <!--<i class="anticon anticon-left-circle-o"></i>-->
      <span class="content-title">{{ displayService.name }}</span>
    </div>
    <div class="content-body">
      <div nz-row>
        <div nz-col [nzSpan]="17">
          <form nz-form>
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>展示名称：</div>
              <div nz-form-control nz-col [nzSm]="12" [nzXs]="24">
                <nz-input [(ngModel)]="name" [nzPlaceHolder]="'请输入展示名称'" [nzSize]="'large'" [ngModelOptions]="{standalone: true}" [nzDisabled]="true">
                </nz-input>
              </div>
            </div>

            <div nz-form-item nz-row *ngIf="picList.length">
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">展示图片：</div>
              <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                <div>
                  <app-upload [(fileList)]="fileList" [(piclist)]="picList" [picSizeInfo]="picSizeInfo" [readOnly]="true" (piclistChange)="fileChange($event)"
                    (fileListChange)="fileChange($event)"></app-upload>
                </div>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" *ngIf="type == 'product'">转跳商品：</div>
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" *ngIf="type == 'coupons'">转跳卡券：</div>
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" *ngIf="type == 'activity'">转跳活动：</div>
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" *ngIf="type == 'page'">转跳页面：</div>
              <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                <p *ngIf="type == 'product' && data.length === 0">暂无商品</p>
                <div class="checked-goods-container" *ngIf="type == 'product' && !!data['id']">
                  <div class="name">
                    <img src="{{AliyunOssOutputUrl+'/'+data.first_picture}}" alt="">
                    <div>{{data.name}}</div>
                  </div>
                  <div class="info">
                    <div>
                      <span class="title">商品分类</span>
                      <nz-tag [nzColor]="'#fff'" *ngIf="data['goods_category']">{{data['goods_category']['name']}}</nz-tag>
                      <span style="font-size: 12px;" *ngIf="!data['goods_category']">无分类</span>
                    </div>
                    <div>
                      <span class="title">商品库存</span>
                      <span style="font-size: 12px;">{{data.in_stock}}</span>
                    </div>
                  </div>
                </div>
                <p *ngIf="type == 'activity' &&  data.length === 0">暂无活动</p>
                <div class="checked-goods-container" *ngIf="type == 'activity' && !!data['id']">
                  <div class="name">
                    <nz-tag [nzColor]="data['type']['color']">{{ data['type']['text'] }}</nz-tag>
                    <span>{{data['name']}}</span>
                  </div>
                  <div class="info">
                    <span class="title">活动有效期:</span>
                    <span class="title-content">从 {{ data['start_date'] }} 至 {{ data['end_date'] }}</span>
                    <span class="view-goods-btn" (click)="toggleViewActivityGoods()">查看商品
                      <i class="anticon" [ngClass]="{'anticon-up':data['flexable'],'anticon-down':!data['flexable']}"></i>
                    </span>
                  </div>
                  <div class="goods-wrap" *ngIf="data['flexable']">
                    <div>
                      <div>ID:{{ data['goodsDetail']['id'] }}</div>
                      <div class="goods-bt">
                        <div class="goods-name">{{ data['goodsDetail']['goods_name'] || data['goodsDetail']['name'] }}</div>
                        <div class="goods-right">
                          <div>商品价格</div>
                          <div>￥ {{ data['goodsDetail']['price'] }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <p *ngIf="type == 'coupons' && data.length === 0">暂无卡券</p>
                <div class="checked-goods-container" *ngIf="type == 'coupons' && !!data['id']">
                  <div class="name">
                    <img src="{{ 'assets/images/coupon_icon.png' }}" alt="">
                    <span>{{ data['card_coupons_name'] }}</span>
                  </div>
                  <div class="info">
                    <div>
                      <span class="title">卡券有效期</span>
                      <span *ngIf="data['term_of_validity_time_start']" style="font-size: 12px;">{{data['term_of_validity_time_start']}} - {{data['term_of_validity_time_end']}}</span>
                      <span *ngIf="data['term_of_validity']" style="font-size: 12px;">{{ '领取后' + data['term_of_validity'] + '天内有效' }}</span>
                    </div>
                    <div>
                      <span class="title" style="font-size: 12px;">卡券库存</span>
                      <span>{{data['in_stock']}}</span>
                   </div>
                  </div>
                </div>
                <nz-input *ngIf="type == 'page'" style="width:375px;" [nzSize]="'large'" [nzDisabled]="true" [ngModelOptions]="{standalone: true}"  [ngModel]="url"></nz-input>
              </div>
            </div>
            <div nz-form-item nz-row style="margin-bottom:8px;">
              <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="5">
                <button nz-button [nzSize]="'large'" [nzType]="'primary'" (click)="editShowCaseDetail()">编辑</button>
                <button nz-button [nzSize]="'large'" [nzType]="'default'" style="margin-left:20px;" (click)="delShowCaseDetail()">删除</button>
              </div>
            </div>
          </form>
        </div>
        <div nz-col [nzSpan]="7">
          <div class="preview-title">{{ previewTitle }}</div>
          <div class="preview-subtitle">{{ previewsubTitle }}</div>
          <img style="margin-top:10px;" src="{{ 'assets/images/' + previewSrc + '.png' }}" alt="">
        </div>
      </div>
    </div>
  </div>
</nz-spin>
